{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#导入bootstrap css 其中 bootstrap-theme.css是压缩文件 项目上线时候用 ，也可以bootstrapCDN引入 #}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %} ">
    <style>

        {# 登录的样式#}
         .log_duanxing {
            float: right;
        }
        .box {
            {#宽度#}
            width: 450px;
            border: 1px solid #f0f0f0;
            {#居中#}
            margin-left: auto;
            margin-right: auto;
            {#上外边距离#}
            margin-top: 100px;
            {#内距离#}
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 30px;
            {#加阴影#}
            box-shadow: 5px 10px 10px rgb(0 0 0 / 5%);
        }
    </style>
</head>
<body>

    <div class="box">
        <h1>用户登录</h1>
        <form method="post">

            {# {% csrf_token %} Django 要求我们加入一个 csrfmiddlewaretoken（会产生一个隐藏input标签，在cookies里面与提交到后台都有） 产生的值是随机的 不写会报错 #}
            {% csrf_token %}
            {#   区分登录的人是客户 管理员        #}
{#            <label>角色</label>#}
{#            {{ form.role  }}#}
{#           <div class="form-group">#}
{#            <label>用户名</label>#}
         {#   单独写字段方式       #}
{#               {{ form.username }}#}
{#           </div>#}
{#            <div class="form-group">#}
{#            <label>密码</label>#}
{#                {{ form.password }}#}
{#           </div>#}

            {#  字段太多  以循环form的形式实现以上功能  field是一个个类里面定义的对象      #}
             {% for field in form %}
                {# 利用position布局解决错误记录占位问题 margin-bottom低外边距#}
                <div class="form-group" style="position: relative;margin-bottom: 25px">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span style="color: red;position: absolute;">{{ field.errors.0 }}</span>
                </div>
                {#   整体校验错误              #}
                {{ form.non_field_errors.0 }}
            {% endfor %}
            <button type="submit" class="btn btn-primary">登 录</button>
            {#  登录结果异常          #}
            <span style="color: coral">{{ error }}</span>
            {#   由路由 跳转到短信登录     #}
            <a class="log_duanxing" href="{% url 'sms_login' %}">短信登录</a>
        </form>
    </div>
</body>
</html>